<template>
  <div id="newCustomer" class="newCustomer">
    <group>
	    <x-switch class="customerSwitch" title="正式学员" :value-map="[0, 1]" v-model="status" label-align="left"></x-switch>
      <x-input required title="姓名" name="name" placeholder="请输入姓名" is-type="china-name" v-model="name"></x-input>
	    <x-input required title="小名" name="nickname" is-type="china-name" v-model="nickname"></x-input>
      <x-input required title="手机" name="phone" mask="99999999999" :max="11" is-type="china-mobile" v-model="phone"></x-input>
	    <popup-picker title="性别" :data="list" v-model="sex" value-text-align="right"></popup-picker>
	    <datetime class="customerCell" title="生日" value-text-align="right" v-model="birthday"></datetime>
    </group>
	  <div>
		  <PickList ref="salesRef" url="users/users_pop" cellTitle="销售" listTitle="销售列表"></PickList>
		  <PickList ref="teachersRef" url="users/users_pop" cellTitle="老师" listTitle="教师列表"></PickList>
	  </div>

	  <div class="error" v-show="error">{{error}}</div>

	  <flexbox>
		  <flexbox-item>
			  <x-button class="flexBtn_confirm" :gradients="['#FF5E3A', '#FF9500']" @click.native="createCustomer">确定</x-button>
		  </flexbox-item>
		  <flexbox-item>
			  <x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
		  </flexbox-item>
	  </flexbox>

  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../../utils/networking'
	import PickList from '../../../../components/mobile/picklist/picklist'
  import {XHeader, Group, XInput, XButton, Cell, Datetime, PopupPicker, Popup, Checklist, TransferDom, XSwitch, Flexbox, FlexboxItem} from 'vux'
  export default {
    name: "newCustomer",
	  directives: {
		  TransferDom
	  },
    components:{
    	XHeader,
    	XSwitch,
    	PickList,
      Group,
      XInput,
      XButton,
      Cell,
	    Datetime,
	    PopupPicker,
	    Popup,
	    Checklist,
	    TransferDom,
	    Flexbox,
	    FlexboxItem
    },
    data() {
    	return {
		    show: false,
		    name: '',
		    nickname: '',
		    phone: '',
		    birthday: '',
		    teacher: '',
		    sales: '',
		    sexValue: true,
		    status: 0,
		    sex: ['男'],
		    list: [['男', '女']],
		    userListTitle: '用户列表',
		    objectList: [],
		    objectListValue: [],
		    error: ''
	    }
    },
	  created: function() {
		  bus.$emit("barController", 1)
		  bus.$emit("setTopSimpleTitle", '新建学员')
	  },
	  watch: {
		  sex: function () {
			  if(this.sex[0] == '男'){
			  	this.sexValue = true
			  }else{
			  	this.sexValue = false
			  }
		  }
	  },
    methods: {
	    cancel: function () {
		    this.$router.go(-1)
	    },
      createCustomer: function () {

      	if(this.name == '' || this.phone == ''){
		      this.error = "请确认姓名和手机填入正确"
		      return
	      }

        let _this = this
      	NetWorking.doPost(
      		'customers',
		      null,
		      {
		      	name: this.name,
			      nickname: this.nickname,
			      phone: this.phone,
			      sex: this.sexValue,
			      birthday: this.birthday,
			      status: this.status,
			      referrer_id: 1
		      },
		      {
			      headers: {
				      'Content-Type': 'application/json;charset=utf-8',
				      'data': 'JSON.stringify(json)'
			      },
			      params: {
				      "salesList": JSON.stringify(this.$refs.salesRef.fullValues),
				      "teachersList": JSON.stringify(this.$refs.teachersRef.fullValues)
			      }
		      }
	      ).then(
	      	response => {
	      		let rs = response.data
			      if(rs.error_code == 0){
			          _this.$router.replace({ name: 'customerDetails', params: { id: rs.customer_id }})
			      }else{
				      alert(rs.error_message);
			      }
		      }
	      )

	      this.$emit('showTabbar', true)
      }
    }
  }
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.flexBtn {
		width: 80% !important;
		margin-top: 15px;
		margin-bottom: 5px;
		border-radius: 25px;
	}

  .newCustomer {
	  border: solid;
	  border-color: #f7f7fa;
	  margin-left: 5px;
	  margin-right: 5px;
	  margin-top: 56px;
	  box-shadow: 5px 5px 5px #888888;
	  border-radius: 25px;
	  margin-bottom: 100px;
	  background: white;
  }
  .buttonCustomer {
    border-radius: 25px;
	  margin-top: 15px;
  }

	.customerCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
	}

	.weui-cell__bd {
		text-align: left;
	}

	.weui-cells {
		font-size: 14px !important;
	}
</style>
